/*
 * @Author: yangzonglong
 * @Date: 2021-05-18 17:24:25
 * @version: v1.0.0
 * @Descripttion: 脚本配置
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-05-19 09:56:45
 * @Auditor: 
 */
import React, { useState, useCallback, useContext, useEffect } from 'react';
import { Form, Input, Select } from 'antd';
import { Tabs } from '@library';
import context from '../context';
import { ScriptTaskProps } from './../../../interface';
import style from './../style.module.scss';

const t = window.$app.t;

const tabsData = [
  { label: t('baseSet'), id: 'base' },
  { label: t('scriptSet'), id: 'script' }
]

export default () => {
  const { modeler, self } = useContext(context);
  const [tabId, setTabId] = useState(tabsData[0].id);
  const [eventName, setEventName] = useState('');
  const [eventTypeCode, setEventTypeCode] = useState('');
  const [js, setJs] = useState('');

  const _self = self as ScriptTaskProps;

  useEffect(() => {
    setEventName(_self.businessObject?.name || '');
    setEventTypeCode(_self.businessObject?.eventTypeCode || '');
    setJs(_self.businessObject?.script || '')
  }, [_self]);

  const onChangeName = useCallback((e: React.BaseSyntheticEvent) => {
    modeler.get('modeling').updateLabel(self, e.target.value);
    setEventName(e.target.value);
  }, [modeler, self]);

  const onChangeEventType = useCallback((e) => {
    setEventTypeCode(e);
    modeler.get('modeling').updateProperties(self, {
      eventTypeCode: e,
      eventTypeName: e === '10' ? t('eventSet') : t('scriptSet')
    })
  }, [modeler, self]);

  const onChangeJs = useCallback((e) => {
    setJs(e.target.value);
    modeler.get('modeling').updateProperties(self, {
      scriptFormat: 'JavaScript',
      script: e.target.value
    })
  }, [modeler, self]);

  return (
    <div className={style.scroll}>
      <Tabs mode='tabs' curTabId={tabId} onChange={setTabId} tabs={tabsData} />
      <main>
        <Form layout='vertical'>
          {tabId === tabsData[0].id && (
            <Form.Item label={t('eventName')} required>
              <Input value={eventName} onChange={onChangeName} />
            </Form.Item>
          )}
          {tabId === tabsData[1].id && (
            <>
              <Form.Item label={t('eventType')} required>
                <Select value={eventTypeCode} onChange={onChangeEventType}>
                  <Select.Option value="10">{t('eventSet')}</Select.Option>
                  <Select.Option value="20">{t('scriptSet')}</Select.Option>
                </Select>
              </Form.Item>

              <Form.Item label={t('script')} required>
                <Input.TextArea value={js} onChange={onChangeJs} rows={5} />
              </Form.Item>
            </>
          )}
        </Form>
      </main>
    </div>
  )
}
